<template>
    <div class="">
        <div class="title-row">
            <div class="flex item-center">
                <div class="label-line"></div>
                <span class="title">智能柜使用情况</span>
            </div>
            <div class="line"></div>
            <img @click="resetChestsPassword" class="pointer" src="../../assets/unifyAcceptWorkbench/key.png" alt="">
        </div>
        <div class="chests-content">
            <ul v-for="(item,index) in dataList" :key="index" class="chests-ul">
                <li v-for="(sItem,sIndex) in item" :key="sIndex" :class="getActiveClass(sItem)" class="chests-li"></li>
            </ul>
        </div>
    </div>
</template>

<script>
import { chunkArr } from "../../utils";
import { tySmartCabinetInfo, setChestsPassword } from "../../config/api";
export default {
    props: ["list"],
    data() {
        return {
            filter: 1, //1表示累计，2表示今日
            dataList: [],
            defaultList: Array.from(new Array(72))
        };
    },
    methods: {
        /**
         * 获取智能柜使用信息
         */
        getInfo() {
            let request = {};
            tySmartCabinetInfo(request).then((rows = []) => {
                // rows = [{ xmbh: "1-2" }, { xmbh: "4-2" }, { xmbh: "5-3" }];
                this.defaultList.map((item, index) => {
                    this.defaultList[index] = { status: "" };
                });
                let arr = chunkArr(this.defaultList, 9);
                rows.map(item => {
                    let tempArr = item.xmbh.split("-");
                    arr[tempArr[0] - 1][tempArr[1] - 1].status = item.status;
                });
                this.dataList = arr;
            });
        },
        /**
         * 重置智能柜密码
         */
        resetChestsPassword() {
            this.$confirm("是否获取统一开柜密码？", "温馨提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                setChestsPassword({}).then(() => {
                    this.$message({
                        type: "success",
                        message: "操作成功"
                    });
                });
            });
        },
        /**
         * 获取占用颜色
         */
        getActiveClass(sItem){
            let arr = {"占用":"zy","锁定":"sd"}
            if(!sItem){
                return "";
            }
            return arr[sItem.status]
        }
    },
    created() {
        let defaultList = Array.from(new Array(72));
        let arr = chunkArr(defaultList, 9);
        this.dataList = arr;
    },
    watch: {
        list(n) {
            this.defaultList.map((item, index) => {
                this.defaultList[index] = { status: "" };
            });
            let arr = chunkArr(this.defaultList, 9);
            n.map(item => {
                let tempArr = item.xmbh.split("-");
                arr[parseInt(tempArr[0]) - 1][parseInt(tempArr[1]) - 1].status = item.status;
            });
            this.dataList = arr;
        }
    }
};
</script>

<style lang = "scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";

.chests-content {
    padding-top: 25px;
    display: flex;
    flex:1;
    .chests-ul {
        display: flex;
        flex-direction: column;
        flex:1;
        margin-right: 10px;
    }
    .chests-li {
        width:100%;
        height: 18px;
        background: #eeeeee;
        margin-bottom: 10px;
        &:last-child {
            margin-right: 0;
        }
        &.zy {
            background-color: #1a36a9;
        }
        &.sd{
            background-color: orange;
        }
    }
}
.pointer {
    cursor: pointer;
}
</style>